<template>
  <div id="app">
    <!-- el-row 行
    el-col 列  默认将界面分为 24 列  
    col组件提供 :span=8  
    row 组件提供gutter来指定每一栏之间的间隔 :gutter='20'
    
    -->
    <!-- <el-row class="box">
      <el-col :span='8'>
        <div class="bg-red"></div>
      </el-col>
      <el-col :span='8'>
        <div class="bg-blue"></div>
      </el-col>
      <el-col :span='8'>
        <div class="bg-yellow"></div>
      </el-col>
    </el-row> -->

    <!-- 有间隔的例子 -->
    <el-row :gutter='20' class="box2">
      <el-col :span='4'>
        <div class="bg-green"></div>
      </el-col>
      <el-col :span='7'>
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span='5'>
        <div class="bg-green"></div>
      </el-col>
      <el-col :span='8'>
        <div class="bg-yellow"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

<style lang='less' scoped>
.box{
  width: 100vw;
  height: 100vh;
  .bg-blue{
    height: 20px;
    width: 100%;
    background-color: blue;
  }
  .bg-red{
    height: 20px;
    width: 100%;
    background-color: red;
  }
  .bg-yellow{
    height: 20px;
    width: 100%;
    background-color: yellow;
  }
}

.box2{
  width: 100vw;
  height: 100vh;
  .bg-green{
    height: 100vh;
    width: 100%;
    background-color: yellowgreen;
  }
  .bg-yellow{
    height: 20px;
    width: 100%;
    background-color: yellow;
  }
}


</style>
